<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <div class="banner">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <div class="couplet">
        <div class="adv-left">
            <button>X</button>
            <img src="img/1.png" alt="">
        </div>
        <div class="adv-right">
            <button>X</button>
            <img src="img/1.png" alt="">
        </div>
    </div>
    <div class="else">
        <div class="bottom">
            <button>X</button>
            <img src="img/1.png" alt="">
        </div>
    </div>
</body>
<script>
    var closeCouplet1 = document.querySelector('.adv-left button');
    var closeCouplet2 = document.querySelector('.adv-right button');
    var adCouplet = document.querySelector('.couplet');
    var closeElse = document.querySelector('.else button');
    var adElse = document.querySelector('.else');
    // 关闭对联 
    closeCouplet1.onclick = function(){
        adCouplet.style.display = "none";
    }
    closeCouplet2.onclick = function(){
        adCouplet.style.display = "none";
    }
    // 关闭弹窗广告 
    closeElse.onclick = function(){
        adElse.style.display = "none";
    }

    // 设置定时器
    var bottom = -8;
    var timer = setInterval(popup,30);

    function popup(){
        if (bottom >= 0) {
                clearInterval(timer);
            } else {
                bottom += 0.1;
                adElse.style.bottom = `${bottom}vw`;
            }
    }
</script>
</html>